<template>
    <li>
            <ht-upload
              ref="attachs"
              class="upload-demo"
              multiple
              dbKey="Trd"
              :busField="changeId ? 'ProjectBuildChange' : 'ProjectBuild'"
              :busKey="changeId ? projectBuildId+'_'+changeId : projectBuildId"  
              :busType="attach.code" 
              :disabled="!canEdit"
              :on-success="fileUploadSuccess" 
              :httpRequest="(option)=>httpRequest(option,this.$refs.attachs,attach.code)"
              ftpKey="ftp" 
              v-model="filelist">
              <button v-if="mineUploads.indexOf(attach.name)==-1" class="upload-btn-cls" v-bind:disabled="!canEdit"> 
                <div style="width:200px; word-wrap: break-word"><span v-if="attach.required" style="color:red;">*&nbsp;</span>{{attach.name}}</div>
              </button>
            </ht-upload> 
            <div v-if="mineUploads.indexOf(attach.name)>-1" style="width:228px;margin-left:-13px;border:1px solid white;height:40px;">
              <button class="upload-btn-cls" v-bind:disabled="!canEdit" @click="minUpload"> 
                <div style="width:200px; word-wrap: break-word"><span v-if="attach.required" style="color:red;">*&nbsp;</span>{{attach.name}}</div>
              </button>
            </div>
            <div class="upload-list">
              <a-checkbox-group @change="onChange" :value="checkedValues">
                 <a-row v-for="(file,i) in filelist" :key="i">
                  <a-checkbox :value="file.id">
                  </a-checkbox>
                  <a @click="showAttach(file)">&nbsp;&nbsp;{{file.fileName}}&nbsp;&nbsp;</a>
                  <a @click="showAttach(file)">{{file.uploadTime}}</a>
                </a-row>
              </a-checkbox-group>
            </div>
            <div v-if="this.mineUploads[0] == '项目概算表' && this.attach.name == '项目概算表' && this.itemStatus == 1" style="margin-left:auto">
              <ht-upload 
              :ref="this.attach.code"
              class="upload-demo"
              multiple
              dbKey="Trd"
              :busField="this.changeId ? 'ProjectBuildChange' : 'ProjectBuild'"
              :busKey="this.changeId ? this.projectBuildId+'_'+this.changeId : this.projectBuildId"
              :disabled="false"
              :on-success="fileUploadSuccess" 
              :busType="this.attach.code"
              ftpKey="ftp"
              v-model="otherAttachList"
              :httpRequest="(option)=>httpRequest(option,this.$refs[this.attach.code],this.attach.code)">
                <el-button size="mini" type="primary" v-bind:disabled="false">
                  <span>更多附件上传
                    <!--<span v-if="otherAttaches[0].required" style="color: red">&nbsp;*</span>-->
                  </span>
                </el-button>
              </ht-upload>
              <!--<button class="upload-btn-cls" style="margin-left:1200px;" @click="moreUpload">更多附件上传</button>-->
            </div>

          </li>
</template>

<script>
import '@/utils/upload.install.js'
import '@/config/hteupload.install.js';
import { formatFileSize, endWith, strNotNull } from '@/utils/common.js'
import { getAction, postAction, getActionAsync } from '@/api/manage'

export default {
  data() {
      return {
        name: '',
        filelist:[],
        url:{
          logAttachAdd: '/projectChange/logAttachAdd',
          getAttachInfo: '/tp/attach/getAttaches',
        },
        checkedValues:[],
        otherAttachList:[],
        otherAttaches:[],
      }
  },
  created () {
    // if(this.mineUploads[0] == '项目概算表' && this.attach.name == '项目概算表'){
    //   console.log('项目数组:',this.mineUploads)
    //   console.log('projectBuildId:',this.projectBuildId)
    //   console.log('attach:',this.attach.code)
    //   console.log('changeId:',this.changeId)
    // }
    
  },
   mounted() {
     
     this.$refs.attachs.fileListDefault=[]
   },
  methods: {
    moreUpload(){
      console.log('点击了上传更多附件')
    },

    minUpload(){
      this.$emit('minUpload')
    },
    getAttachIds(){
      let ids = []
      this.filelist.map(item=>{
        ids.push(item.id)
      })
      return ids ;
    },
     httpRequest(option,$refs,attachCode){
      this.$emit('httpRequest',option,$refs,attachCode);
    },
      fileUploadSuccess(response,file,fileList){
        this.refreshFileList()
        // if(!this.changeId){
        //   return;
        // }
        // //项目变更，记录附件变更日志
        // console.log(response);
        // var res=response[0];
        // var data={
        //   busKey:this.projectBuildId,
        //   fileName:res.fileName,
        //   changeTarget: 7,
        //   attachCode:this.attach.code
        // }
        // getAction(this.url.logAttachAdd, data)
        // .then((res) => {
        //   if (res.code == 200) {
        //     console.log('记录日志成功:'+res.fileName)
        //   } else {
        //     this.$message.warning('记录附件变更日志失败:' + res.msg)
        //   }
        // })
        // .catch((res) => {
        //   this.$message.warning('记录附件变更日志异常:' + res.msg)
        // })
      },

      //刷新概算表数据
      refreshFileList(){
        if(this.mineUploads[0] == '项目概算表' && this.attach.name == '项目概算表'){
          this.$message.success('文件上传成功')
          let busField = this.changeId ? 'ProjectBuildChange' : 'ProjectBuild'
          //重新发起请求刷新页面数据
          let refreshUrl = this.url.getAttachInfo
          +'?dbKey=Trd'
          +'&ftpKey=ftp'
          +'&busKey='+this.projectBuildId
          +'&busField='+busField
          +'&busType='+this.attach.code;
          console.log('refreshUrl:',refreshUrl)
          getAction(refreshUrl).then((res)=>{
            console.log(res)
            console.log('get Attch:',res.data)
            if(res.code === 1){
              this.filelist = res.data
            }
          })
        }
      },

      onChange(checkedValues){
        this.checkedValues = checkedValues
        this.$emit('mainAttachSelected',this.attach.code,checkedValues);
      },
      showAttach(file){
        this.$emit('showAttach',file);
      },
      deleteFileList(){
      
        this.checkedValues.forEach(item=>{
        let index = this.filelist.findIndex(attach=>{return attach.id==item})
          if(index != -1){
            this.filelist.splice(index,1);
          }
          })
        this.checkedValues = []
        this.$emit('mainAttachSelected',this.attach.code,[]);
      },
      otherAttachDataListFresh() {
        let vm = this
        console.log('有变化，需要刷新页面')
        // this.fileList = []
        // let index = 0
        // this.otherAttachList.forEach((item) => {
        //   var size = formatFileSize(item.size)
        //   this.fileList.push({
        //     key: item.id || item.uid,
        //     name: item.fileName||item.name,
        //     size: size,
        //     time: item.uploadTime,
        //     uploader: item.uploader,
        //     uploaderName: item.uploaderName,
        //     status:item.status || 'success',
        //     percentage:item.percentage,
        //     uid:item.uid
        //   })
        // })
    },
  },
  watch: {
    // otherAttachList:{ deep: true,
    //   handler(fileList)  { 
    //   this.otherAttachDataListFresh()
    // }}, 
  },
  props:{
        projectBuildId: {
          Type: String,
          default: ''
         },
        attach: {
          Type: Object,
          default:{}
        },
        canEdit: {
          Type: Boolean,
          default: false 
        },
        changeId: {
          Type: String,
          default: ''
        },
        mineUploads: {
          Type: Array,
          default: () =>[]
        },
        itemStatus:{
          Type:Number,
          default:0
        } 
    },
}
</script>

<style lang="less" scoped>
/deep/.el-upload-list{
  display: none;
}
/deep/.anticon{
  font-size: 16px;
  vertical-align: middle;
}
/deep/ .ant-btn-primary{
  width: 85px;
  height: 30px;
  border-radius: 2px;
  background: #4095e4;
  margin-right: 10px;
}
/deep/ .default{
  width: 85px;
  height: 30px;
  border-radius: 2px;
}
/deep/ .ant-table-thead > tr > th {
  background: #dadee9 !important;
}
/deep/.ant-table-thead > tr:first-child > th:first-child,/deep/ .ant-table table{
  border-radius: unset;
  line-height: 1;
}
/deep/ .ant-table-tbody .ant-table-row td{
  &:nth-child(2){
    color:#3e8ee2;
  }
}
.attach{
  border: 1px solid #e6e6e6;
  background-color: #fff;
  padding-bottom: 30px;
  .header{
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    padding: 30px 0 0 25px;
  }
  .content{
    padding: 25px;
    .projectFile{
      .title{
        border-left: 3px solid #47a4fa;
        padding: 0 10px;
        .download-control{
          display: inline-block;
          margin-left: 10px;
        }
      }
    }
    ul{
      list-style: none;
      padding: 15px 0;
      border-bottom: 1px solid #f7f7f7;
      li{
        padding: 25px;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
      }
      .upload-demo{
        display: flex;
        /deep/ .el-upload{
          margin-right: 10px;
        }
      }
    }
    .infoTips{
      background: #e6f7ff;
      border: 1px solid #aee1ff;
      border-radius: 4px;
      margin: 20px 0;
      padding: 5px 10px;
      font-size: 12px;
      width: fit-content;
    }
    .otherAttach{
      .upload-control{
        margin-bottom: 15px;
      }
    }
    .btn{
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
  }
}
.upload-btn-cls{
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    font-size: 12px;
    border-radius: 3px;
    div{
      margin-top: 5px;
      margin-bottom: 5px;
    }
}
</style>